<div class="container-fluid">
  <div class="row">
    <div class="col-md-6">
      <div class="card">
        <div class="card-header">
          <h4 class="card-title">Navigation Pills -
            <small>Horizontal Tabs</small>
          </h4>
        </div>
        <div class="card-content">
          <ul class="nav nav-pills nav-pills-warning">
            <li *ngFor="let tab of horizontalTabs; index as i" [ngClass]="{'active': tab.isActive}">
              <a (click)="horizontalTabsChange(horizontalTabs, i)">{{tab.name}}</a>
            </li>
          </ul>
          <div class="tab-content">
            <div class="tab-pane active">{{horizontalTabsContent}}</div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-md-6">
      <div class="card">
        <div class="card-header">
          <h4 class="card-title">Navigation Pills -
            <small class="category">Vertical Tabs</small>
          </h4>
        </div>
        <div class="card-content">
          <div class="row">
            <div class="col-md-4">
              <ul class="nav nav-pills nav-pills-rose nav-stacked">
                <li *ngFor="let tab of verticalTabs; index as i" [ngClass]="{'active': tab.isActive}">
                  <a (click)="verticalTabsChange(verticalTabs, i)">{{tab.name}}</a>
                </li>
              </ul>
            </div>
            <div class="col-md-8">
              <div class="tab-content">
                <div class="tab-pane active">{{verticalTabsContent}}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-md-6">
      <div class="card">
        <div class="card-header">
          <h4 class="card-title">Collapsible Accordion</h4>
        </div>
        <div class="card-content">
          <div aria-multiselectable="true" class="panel-group">
            <div class="panel panel-default" *ngFor="let tab of collapsibleAccordionTabs; index as i">
              <div class="panel-heading">
                <a [ngClass]="{'active': tab.isActive}" (click)="collapsibleAccordionTabsChange(collapsibleAccordionTabs, i)">
                  <h4 class="panel-title">
                    {{tab.name}}
                    <i class="fa fa-angle-down"></i>
                  </h4>
                </a>
              </div>
              <div class="panel-collapse collapse" [ngClass]="{'in': tab.isActive}">
                <div class="panel-body">{{tab.content}}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-md-6">
      <div class="card">
        <div class="card-header">
          <h4 class="card-title">Navigation Pills Icons -
            <small class="category">Vertical Tabs</small>
          </h4>
        </div>
        <div class="card-content">
          <div class="row">
            <div class="col-md-4">
              <ul class="nav nav-pills nav-pills-icons nav-pills-rose nav-stacked" role="tablist">
                <li *ngFor="let tab of iconsVerticalTabs; index as i" [ngClass]="{'active': tab.isActive}" (click)="iconsVerticalTabsChange(iconsVerticalTabs, i)">
                  <a>
                    <i class="fa {{tab.icon}}"></i> {{tab.name}}
                  </a>
                </li>
              </ul>
            </div>
            <div class="col-md-8">
              <div class="tab-content">
                <div class="tab-pane active">
                  {{iconsVerticalTabsContent}}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-md-8 col-md-offset-2">
      <h3 class="title text-center">Page Subcategories</h3>
      <br>
      <div class="nav-center">
        <ul class="nav nav-pills nav-pills-warning nav-pills-icons" role="tablist">
          <li *ngFor="let tab of pageSubcategoriesTabs; index as i" [ngClass]="{'active': tab.isActive}" (click)="pageSubcategoriesTabsChange(pageSubcategoriesTabs, i)">
            <a>
              <i class="fa {{tab.icon}}"></i> {{tab.name}}
            </a>
          </li>
        </ul>
      </div>
      <div class="tab-content">
        <div class="tab-pane active">
          <div class="card">
            <div class="card-header">
              <h4 class="card-title">{{pageSubcategoriesTabsTitle}}</h4>
              <p class="category">{{pageSubcategoriesTabsCategory}}</p>
            </div>
            <div class="card-content">{{pageSubcategoriesTabsContent}}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
